<template>
  <div class="gongSi">
    <div class="jK">{{companyName}}</div>
    <div class="city" @click="handleClick1">
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
    </div>
    <el-dialog :visible.sync="saveDialogVisible" width="1800px" top="66px">
      <div class="img">
        <img src="../assets/images/gongsijianjie.png" alt />
      </div>
      <div class="banner">
        <div class="left scrollBar">
          <div class="search">
            <img :src=" this.baseUrl+logoUrl" alt />
          </div>
          <div class="text">
            <h1>{{name}}</h1>
            <p>{{introduction}}</p>
          </div>
        </div>
        <div class="right scrollBar">
          <div class="search">
            <div class="content_middle" style="position: relative;">
              <div class="company">
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round1">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监督单位</div>
                          <div style="font-size:22px">{{jddwCount}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round2">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监督对象</div>
                          <div style="font-size:22px">{{jddxCount}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round3">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监察对象</div>
                          <div style="font-size:22px">{{jcdxCount}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round4">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">保全总量</div>
                          <div style="font-size:22px">{{bqCount}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="contain">
              <div class="lianzheng">
                <img src="../assets/images/廉政.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>姓名</span>
                      <span>职务</span>
                    </li>
                    <li v-for="item in list" :key="item.id" @click="handleClick(item.id)">
                      <span style="flex:5" class="three">{{item.name}}</span>
                      <span style="flex:5" class="three">{{item.post}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <IncorruptGovernment
                ref="runIncorruptGovernment"
                :id="lzId"
                :nameO="name"
                :logoUrl="logoUrl"
                :listO="list"
              ></IncorruptGovernment>
              <div class="lianzheng">
                <img src="../assets/images/公司.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>年份</span>
                      <span>档案名称</span>
                    </li>
                    <li v-for="item in company" :key="item.id" @click="openCompany(item.id)">
                      <span style="flex:5" class="three">{{item.year}}</span>
                      <span style="flex:5" class="three">{{item.title}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <CompanyProfile ref="runCompanyProfile" :openCompany="openCompanyO"></CompanyProfile>
              <div class="lianzheng">
                <img src="../assets/images/三公.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>金额(元)</span>
                      <span>科目</span>
                      <span>支出时间</span>
                    </li>
                    <li v-for="item in three" :key="item.id" @click="openThreeMoney">
                      <span style="flex:3" class="three">{{item.amount}}</span>
                      <span style="flex:3" class="three">{{item.feesName}}</span>
                      <span style="flex:3" class="three">{{item.period}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <ThreeMoney ref="runThreeMoney"></ThreeMoney>
              <div class="lianzheng">
                <img src="../assets/images/信访.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>举报标题</span>
                      <span>被举报人</span>
                    </li>
                    <li v-for="item in letter" :key="item.id" @click="openLetter(item.id)">
                      <span style="flex:5" class="three">{{item.title}}</span>
                      <span style="flex:5" class="three">{{item.personName}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <ReportDetail ref="runReportDetail"></ReportDetail>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 廉政档案
import IncorruptGovernment from "../components/IncorruptGovernment.vue";
// 档案详情
import CompanyProfile from "../components/CompanyProfile.vue";
// 信访举报
import ReportDetail from "../components/ReportDetail.vue";
// 三公经费
import ThreeMoney from "../components/ThreeMoney.vue";
// 图标
import Icon from "../components/Icon.vue";
export default {
  props: ["companyName"],
  components: {
    IncorruptGovernment,
    CompanyProfile,
    ReportDetail,
    ThreeMoney,
    Icon,
  },
  data() {
    return {
      // 监督单位
      jddwCount: "",
      // 监督对象
      jddxCount: "",
      // 监察对象
      jcdxCount: "",
      // 保全数量
      bqCount: "",
      // 保全总量
      saveDialogVisible: false,
      // 保全编号
      name: "",
      region: "",
      // 保全时间
      date: "",
      // 廉政
      list: [],
      company: [],
      three: [],
      letter: [],
      // 公司简介
      introduction: "",
      // 公司名称
      name: "",
      logoUrl: "",
      // 廉政档案
      lzId: "",
      coId: "",
      // 公司档案详情
      openCompanyO: [],
      baseUrl: "",
      id: null,
    };
  },
  created() {
    this.baseUrl = this.$store.state.fileIp;
  },
  methods: {
    getCompanyList() {
      this.Api.companyList().then((res) => {
        res.data.map((item) => {
          if (item.name == this.companyName) {
            this.id = item.id;
          }
        });
       
        this.getcompanyIntro();
      });
    },
    handleClick1() {
      this.getCompanyList();
      this.saveDialogVisible = true;
    },
    // 公司简介
    getcompanyIntro() {
      this.Api.companyIntro({ id: this.id }).then((res) => {
        this.jcdxCount = res.data.companyStatistic.jcdxCount;
        this.jddxCount = res.data.companyStatistic.jddxCount;
        this.jddwCount = res.data.companyStatistic.jddwCount;
        this.bqCount = res.data.companyStatistic.bqCount;
        this.list = res.data.personList;
        this.company = res.data.archiveList;
        this.three = res.data.consumptionList;
        this.letter = res.data.complainList;
        this.introduction = res.data.introduction;
        this.name = res.data.name;
        this.logoUrl = res.data.logoUrl;
      });
    },
    // 廉政档案
    handleClick(id) {
      this.$refs.runIncorruptGovernment.show();
      this.lzId = id;
    },
    // 公司档案
    openCompany(id) {
      this.Api.companyArchiveDetail({ id: id }).then((res) => {
        this.openCompanyO = res.data;
        console.log(this.openCompanyO);
        this.$refs.runCompanyProfile.show();
      });
    },
    // 信访举报
    // 信访举报
    openLetter(id) {
      console.log(id, "123");
      console.log(this.$refs.runReportLetterDetail);
      this.$parent.godetail(id);
      // this.$refs.runReportLetterDetail.show();
    },
    // 三公经费
    openThreeMoney() {},
  },
};
</script>
<style lang="less" scoped>
.imgyi {
  margin-top: -304px;
}
.three {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.gongSi.el-dialog__header {
  background: url("../assets/images/公司简介.png") #000080 !important;
  background-position: 20px !important;
  background-repeat: no-repeat !important;
  position: relative;
  padding: 81px 20px 10px 30px;
  box-sizing: border-box;
  width: 100%;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background: url(../assets/images/bg.png);
  background-repeat: repeat !important;
  height: 800px !important;
}

.banner {
  width: 1760px;
  height: 800px !important;
  padding: 30px 2px 30px 0;
  background: url("../assets/images/框1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 70px;
  display: flex;
}
.left {
  width: 540px;
  border-right: 2px solid #0a46f2;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  overflow-y: auto;
}
.right {
  width: 1174px;
  height: 720px;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.search {
  flex: 1;
  text-align: center;
  margin-top: 46px;
}
.text {
  margin-top: 41px;
  padding: 0 68px;
  box-sizing: border-box;
}
.text h1 {
  width: 392px;
  height: 40px;
  font-size: 28px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
}
.text p {
  text-align: left;
  text-indent: 2em;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  line-height: 32px;
}

.round {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #0a46f2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.round1 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(185, 22, 242, 1) 100%
  );
}
.round2 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(77, 184, 156, 1) 100%
  );
}
.round3 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(22, 61, 242, 1) 100%
  );
}
.round4 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(96, 91, 247, 1) 100%
  );
}
.round5 {
  margin: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgb(11, 18, 138);
}
@keyframes turnAround {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.img_run {
  animation: turnAround 4s linear infinite;
}
.company {
  display: flex;
  flex: 25%;
  justify-content: space-between;
}
.kuang {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url();
}
.contain {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 73px;
}
.lianzheng {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.lz {
  transform: translate(0, -15%);
}
.company1 {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.sangong {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.xinfang {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.box ul li {
  width: 496px;
  height: 49px;
  display: flex;
  justify-content: space-around;
}
ul li:nth-child(odd) {
  background: #020b8a;
}
ul {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.box ul li span {
  width: 200px;
  height: 49px;
  font-size: 19px;
  font-weight: 400;
  color: white;
  line-height: 49px;
  overflow: hidden;
}
.box {
  margin-bottom: 30px;
}
.box .first span {
  color: #3cdfff;
}
.imgyi {
  margin-top: -17px;
}
// 动画
.city {
  position: absolute;
  left: 240px;
  top: -600px;
  color: #fff;
}

.dotted {
  width: 8px;
  height: 8px;
  background-color: #06ffff;
  border-radius: 50%;
}
.city div[class^="pulse"] {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #06ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: pulse 1.2s linear infinite;
}

.city div.pulse2 {
  animation-delay: 0.4s;
}

.city div.pulse3 {
  animation-delay: 0.8s;
}

@keyframes pulse {
  0% {
  }

  70% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }

  100% {
    width: 60px;
    height: 60px;
    opacity: 0;
  }
}
.jK {
  position: absolute;
  left: 280px;
  top: -600px;
  color: #fff;
  width: 80px;
  height: 28px;
  font-size: 20px;
}
.img {
  width: 196px;
  height: 55px;
  position: absolute;
  left: 800px;
  top: 21px;
}
</style>